<template>
  <div>
    <h6 class="list_title">
      <img src="@/assets/images/shu_03.jpg" alt />
      <span>项目信息概览</span>
    </h6>
    <el-select
      id="parentproject"
      style="width:15%; margin-left:25px"
      v-model="selectvalue"
      placeholder="请选择项目"
      @change="findchild(selectvalue)"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.parentProjectName"
        :value="item.id"
      ></el-option>
    </el-select>
    <span class="parent_title">项目公司负责人:</span>
    <span class="parent_content">{{parentInfo.projHead}}</span>
    <span class="parent_title">建设单位负责人:</span>
    <span class="parent_content">{{parentInfo.constructionHead}}</span>
    <span class="parent_title">省份:</span>
    <span class="parent_content">{{parentInfo.provinces}}</span>
    <span class="parent_title">市区:</span>
    <span class="parent_content">{{parentInfo.city}}</span>

    <div class="table_builders table_builders1">
      <!-- <ul class="s_thead cl">
        <li class="thead_li thead_li1">子项目名称</li>
        <li class="thead_li thead_li1">项目方负责人</li>
        <li class="thead_li">建设方负责人</li>
        <li class="thead_li thead_li1">所在区</li>
        <li class="thead_li thead_li4">修改人</li>
        <li class="thead_li thead_li3">修改时间</li>
      </ul>
      <ul class="s_tbody cl" v-for="item in data" :key="item.id">
        <li class="tbody_li tbody_li1">{{item.subProjName}}</li>
        <li class="tbody_li tbody_li1">{{item.projHead}}</li>
        <li class="tbody_li tbody_li2">{{item.constructionHead}}</li>
        <li class="tbody_li tbody_li1">{{item.townName}}</li>
        <li class="tbody_li tbody_li4">{{item.modifier}}</li>
        <li class="tbody_li tbody_li3">{{item.upTime}}</li>
      </ul>-->
      <!-- <div class="zero" v-if="!total">暂无数据</div> -->

      <el-table :data="data" stripe style="width: 100%" :header-cell-style="{fontWeight:500}">
        <!-- <el-table-column align="center" type="index" label="序号" width="90"></el-table-column> -->
        <el-table-column align="center" prop="subProjName" label="子项目名称" min-width="100"></el-table-column>
        <el-table-column align="center" prop="city" label="所在市" min-width="100"></el-table-column>
        <el-table-column align="center" prop="district" label="所在区" min-width="100"></el-table-column>
        <el-table-column align="center" prop="town" label="所在镇" min-width="100"></el-table-column>
        <el-table-column align="center" prop="projHead" label="项目公司负责人" min-width="150"></el-table-column>
        <el-table-column align="center" prop="constructionHead" label="建设单位负责人" min-width="150"></el-table-column>
        <!-- <el-table-column align="center" prop="modifier" label="修改人" min-width="100"></el-table-column>
        <el-table-column
          align="center"
          prop="upTime"
          label="修改时间"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>-->
      </el-table>
    </div>
    <div class="fenye" style="float:right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/epidemicrisk/alllist.scss";
@import "@/style/epidemicrisk/list_builders.scss";
</style>

<script>
import {
  projectinfo,
  findchildbyid,
  findparentbyid
} from "@/service/epidemicrisk/index.js";
export default {
  data() {
    return {
      currentPage: 1,
      total: 0,
      data: [],
      options: [],
      selectvalue: "",
      parentInfo: {}
    };
  },
  created() {
    //获取父项目列表
    projectinfo().then(res => {
      this.options = res.data.obj;
      this.selectvalue = res.data.obj[0].id;
      this.findchild(this.selectvalue);
    });
  },
  methods: {
    findchild(val) {
      window.console.log(val); //获取父项目ID
      //通果父项目id获取父项目信息
      findparentbyid(val).then(res => {
        // window.console.log(res);
        this.parentInfo = res.data.obj;
      });
      this.findchildbyid(val);
    },
    findchildbyid(val) {
      var currentPage = 1;
      var pageSize = 8;
      findchildbyid(val, currentPage, pageSize).then(res => {
        // window.console.log(res.data.msg);
        this.total = res.data.obj.total;
        this.data = res.data.obj.rows;
      });
    },
    handleSizeChange(val) {
      window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      var id = this.selectvalue;
      var currentPage = val;
      var pageSize = 8;
      findchildbyid(id, currentPage, pageSize).then(res => {
        // window.console.log(res.data.msg);
        this.total = res.data.obj.total;
        this.data = res.data.obj.rows;
      });
    }
  }
};
</script>
